<template>
<div class="third-main">
    <Design ref="design" :designData="designData"   />
    <div class="button">
        <div class="button-part prve thumb" @click="()=>stepChange(1)">上一步</div>
        <div class="button-part next thumb" @click="()=>stepChange(3)">下一步</div>
    </div>
</div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue"
import Design from "@/components/Design/index.vue";
import designDatas from "@/json/design.json";
import { copyObj } from "@/utils/util";

const emits = defineEmits<{
  (event:'stepChange',step:number):void
}>();
const designData = ref(copyObj(designDatas));
const design = ref<InstanceType<typeof Design>>();
const stepChange = (step:number)=>{
    if(step === 3 && !design.value?.checkData()) return;
    emits("stepChange",step);
}

</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>